<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1">
	<title>Swiper Movies App</title>

	<link rel="stylesheet" href="css/idangerous.swiper.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/movies-app.css">
</head>
<body>
	<div class="swiper-container swiper-content">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 1</h1>
					<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 2</h1>
					<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 3</h1>
					<img class="movie-pic" src="img/3.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 4</h1>
					<img class="movie-pic" src="img/4.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 5</h1>
					<img class="movie-pic" src="img/5.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 6</h1>
					<img class="movie-pic" src="img/6.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 7</h1>
					<img class="movie-pic" src="img/7.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 8</h1>
					<img class="movie-pic" src="img/8.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 9</h1>
					<img class="movie-pic" src="img/1.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 10</h1>
					<img class="movie-pic" src="img/2.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 11</h1>
					<img class="movie-pic" src="img/3.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 12</h1>
					<img class="movie-pic" src="img/4.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 13</h1>
					<img class="movie-pic" src="img/5.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 14</h1>
					<img class="movie-pic" src="img/6.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 15</h1>
					<img class="movie-pic" src="img/7.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="inner">
					<h1>Movie 16</h1>
					<img class="movie-pic" src="img/8.jpg" height="150" width="150" alt="">
					<div class="movie-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, consequuntur, officiis esse assumenda corporis voluptates sunt veritatis vero ipsam veniam porro cum libero hic? Pariatur, repudiandae sunt iusto molestiae quam!</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="swiper-container swiper-nav">
		<div class="swiper-wrapper">
			<div class="swiper-slide active-nav">
				<span class="angle"></span>
				<img src="img/1.jpg" alt="">
				<div class="title">Movie 1</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/2.jpg" alt="">
				<div class="title">Movie 2</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/3.jpg" alt="">
				<div class="title">Movie 3</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/4.jpg" alt="">
				<div class="title">Movie 4</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/5.jpg" alt="">
				<div class="title">Movie 5 Long Title</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/6.jpg" alt="">
				<div class="title">Movie 6</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/7.jpg" alt="">
				<div class="title">Movie 7</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/8.jpg" alt="">
				<div class="title">Movie 8</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/1.jpg" alt="">
				<div class="title">Movie 9</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/2.jpg" alt="">
				<div class="title">Movie 10</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/3.jpg" alt="">
				<div class="title">Movie 11</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/4.jpg" alt="">
				<div class="title">Movie 12</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/5.jpg" alt="">
				<div class="title">Movie 13 Long Title</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/6.jpg" alt="">
				<div class="title">Movie 14</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/7.jpg" alt="">
				<div class="title">Movie 15</div>
			</div>
			<div class="swiper-slide">
				<span class="angle"></span>
				<img src="img/8.jpg" alt="">
				<div class="title">Movie 16</div>
			</div>
			
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<!-- Don't forget to get the latest Swiper and scrollbar version here-->
	<script src="js/idangerous.swiper-2.0.min.js"></script>
	<script src="js/movies-app.js"></script>
</body>
</html>